<template>
  <div class="ele-body"  >
    <el-card shadow="never">
      <el-form :model="form" class="ele-form-search" label-width="77px">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="负责人:">
              <el-select filterable multiple remote v-model="form.userName" @focus.prevent="appoint" clearable placeholder="请选择负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="协同人:">
              <el-select filterable multiple remote v-model="form.assistUserName" @focus.prevent="unAppoint" collapse-tags clearable placeholder="请选择协同人" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="submit"> 提交</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="url" :selection.sync="selection"
                     height="calc(100vh - 315px)">
        <!--工单编号-->
        <template slot="wo_number" slot-scope="{row}">
          <span style="cursor: pointer;color: rgb(37, 99, 235);"
                @click="$router.push('/workTickets/workTickets/info?id=' + row.id)">
            {{ row.wo_number }}
          </span>
        </template>
      </ele-pro-table>
    </el-card>

    <Appoint @certainUser="certainUser" @certainCollaborator="certainCollaborator" v-model="form.assistUserName" ref="Appoint" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { removePageTab } from '@/utils/page-tab-util'
import Appoint from './components/Appoint'

export default {
  name: 'SystemLevel',
  components: {
    Appoint,
  },
  computed: {
    ...mapGetters(["permission"])
  },
  data() {
    return {
      //工单id
      id: null,
      // 表格数据接口
      url: `/user/index?positionId=5`,
      // 表格列配置
      columns: [
        {
          prop: 'realname',
          label: '员工',
          align: 'center',
        },
        {
          prop: 'dept_name',
          label: '所在部门',

          align: 'center',
        },
      ],
      //转派flag
      transfer:'',
      //负责人树数据
      treeData: [],
      // 表格选中数据
      selection: [],
      // 表格搜索条件
      where: {},
      visible: false,
      //表单数据
      form: {
        user_id: "",
        assist_user_ids: [],
        userName: [],
        assistUserName: []
      },
      togetherDefaultProps: {
        children: 'sub',
        label: 'name',
        emitPath: false,
        value: "id",
        multiple: true
      },
      defaultProps: {
        children: 'sub',
        label: 'name',
        emitPath: false,
        value: "id",
      }
    };
  },
  mounted() {
    this.form.user_id=""
    this.form.assist_user_ids=[]
    this.id = this.$route.query.id
    if(this.$route.query.transfer){
      this.transfer=this.$route.query.transfer
    }
    this.getTreeData()
  },
  methods: {
    // 负责人数据
    certainUser(user) {
      let data = []
      data.push(user.realname)
      this.$refs.Appoint.visible = false
      this.form.userName = data
      this.form.user_id = user.id
    },
    // 负责人
    appoint() {
      this.$refs.Appoint.visible = true;
      this.$refs.Appoint.isCollaborator = false;
    },
    // 协同人
    unAppoint() {
      this.$refs.Appoint.visible = true;
      this.$refs.Appoint.isCollaborator = true;
    },
    // 协同人数据
    certainCollaborator(collaborator) {
      collaborator.map((item)=>{
        return item.split('-')[0]
      })
       this.form.assistUserName=collaborator.map((item)=>{
         return item.split('-')[1]
       })
      this.form.assist_user_ids = collaborator.map((item)=>{
        return item.split('-')[0]
      });
      this.$refs.Appoint.visible = false;
    },
    //派单
    submit() {
      if(!this.transfer){
      this.$http.post(`/wos/${this.id}/allot`, { ...this.form }).then((res) => {
        if (res.data.code===0){
          this.$message.success(res.data.msg)
          removePageTab('/workTickets/pick-upsList')
          this.form = {
            user_id: "",
            assist_user_ids: [],
            userName: [],
            assistUserName: []
          }
          this.$router.push('/workTickets/workTickets/info?id=' + this.id)
        }else {
          this.$message.error(res.data.msg)
        }
      });
      }else {
        this.$http.post(`/wos/${this.id}/reassigned`, {...this.form}).then((res) => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg)
            removePageTab('/workTickets/pick-upsList')
            this.form = {
              user_id: "",
              assist_user_ids: [],
              userName: [],
              assistUserName: []
            }
            this.$router.push('/workTickets/workTickets/info?id=' + this.id)
          } else {
            this.$message.error(res.data.msg)
          }
        });
      }
    },
    //获取树数据
    getTreeData() {
      this.$http.get(`/dept/engineers`).then((res) => {
        this.treeData = res.data.data
      });

    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({ where: this.where });
    },
    /* 重置搜索 */
    reset() {
      this.current = {}
      this.where = {};
      this.reload();
    },
  }
}
</script>

<style lang="scss">
.el-cascader-panel {
  .el-scrollbar:first-child {
    .el-checkbox {
      display: none !important;
    }
  }

  .el-scrollbar:nth-child(2) {
    .el-checkbox {
      display: none !important;
    }
  }

  .el-scrollbar:nth-child(3) {
    .el-checkbox {
      display: none !important;
    }
  }
}
</style>
